<template>
    <el-header style="text-align: right; font-size: 18px">
        <div class="toolbar">
            <el-dropdown>
                <el-icon style="margin-right: 8px; margin-top: 3px;" :size="18">
                    <setting />
                </el-icon>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="changeMsg">修改信息</el-dropdown-item>
                        <el-dropdown-item @click="open">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <span>{{ username }}</span>
        </div>
    </el-header>
    <div id="mainpart">
        <div id="avapart">
            <el-avatar id="ava" :src="avaUrl" />
        </div>
        <div>
            <span id="spanpart">您好！{{ username }}</span>
        </div>
    </div>
    <el-dialog v-model="dialogaddFormVisible" title="修改管理员信息" :destroy-on-close="true" style="padding: 100px;">
        <el-form :model="addform">
            <el-form-item label="管理员" :label-width="formLabelWidth">
                <el-input v-model="addform.adminename" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="addform.adminepwd" autocomplete="off" type="password" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeadd">取消</el-button>
                <el-button type="primary" @click="onSaveInfo">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import {
} from '@element-plus/icons-vue'
import axios from 'axios';
const formLabelWidth = '80px';
</script>
<script>

export default {
    data() {
        return {
            token: '',
            dialogaddFormVisible: false,
            baseURL: 'http://localhost:8080',
            dialogFormVisible: false,
            showSearch: false,
            tableData: [],
            tableDataStore: [],
            administrator: {
                admineid: '',
                adminename: '',
                adminepwd: ''
            },
            addform: {
                adminename: '',
                password: '',
                pwd: ''
            },
            basedata: '',
            form: {
                admineid: '',
                adminename: '',
                adminepwd: ''
            },
            searchForm: [],
            state1: '',
            state2: '',
            username: '',
            avaUrl: require('../../public/1.jpg')
        }
    },
    inject: ["getToken", "test"],
    methods: {
        init() {
            let token = window.localStorage.getItem('token')
            axios({
                method: 'post',
                url: 'http://localhost:8080/administrator/myself',
                withCredentials: true,
                data: { token: token }
            }).then(res => {
                this.addform = res.data.data
            })
        },

        changeMsg() {
            this.dialogaddFormVisible = true
        },
        onSaveInfo() {
            let token = window.localStorage.getItem('token')
            axios({
                method: 'post',
                url: 'http://localhost:8080/administrator/editmyself',
                withCredentials: true,
                data: {
                    token: token,
                    form: this.addform
                }
            }).then(res => {
                if (res.data.code == 200) {
                    localStorage.removeItem("token")
                    localStorage.removeItem("username")
                    alert("修改成功,将跳转至登录页重新登陆")
                    this.getToken()
                    this.$router.push({
                        path: '/'
                    })
                    this.getToken()
                }
                this.dialogaddFormVisible = false
            })
        },
        closeadd() {
            this.dialogaddFormVisible = false
        },
        logout() {
            localStorage.removeItem("token")
            localStorage.removeItem("username")
            this.getToken()
            this.$router.push({
                path: '/'
            })
            this.getToken()
        },
        open() {
            this.$confirm('您确认要退出登录吗', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.logout()
                this.$message({
                    type: 'success',
                    message: '退出登录成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    mounted() {
        this.init()
        this.username = window.localStorage.getItem('username')
        this.getToken()
    }
}
</script>
<style scoped>
#sidepart {
    width: 100%;
    position: absolute;
    top: 5px;
    font-family: '华文中宋';
}

#mainpart {
    width: 100%;
    position: absolute;
    top: 200px;
    /* left: 260px; */
}

#ava {
    width: 150px;
    height: 150px;
    margin-bottom: 40px;
}

#spanpart {
    font-size: 30px;
    font-family: '华文中宋';
}
</style>